<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- basic -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
    <!-- site metas -->
    <title>轻态公寓·老年港湾</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- site icons -->
    <link rel="icon" href="images/fevicon/fevicon.png" type="image/gif" />
    <!-- Owl Stylesheets -->
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css" />
    <!-- nice select css -->
    <link rel="stylesheet" type="text/css" href="css/nice-select.min.css" />
    <!-- bootstrap css -->
    <link
      rel="stylesheet"
      href="https://www.jq22.com/jquery/bootstrap-4.2.1.css"
    />
    <!-- Site css -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- responsive css -->
    <link rel="stylesheet" href="css/responsive.css" />
    <!-- custom css -->
    <link rel="stylesheet" href="css/custom.css" />

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body id="default_theme" class="property_detail sub_page">
    <!-- loader -->
    <div class="bg_load">
      <img class="loader_animation" src="images/loader.svg" alt="#" />
    </div>
    <!-- end loader -->
    <div id="app">
      <!-- hero area starts -->
      <div class="hero_area">
        <!-- header section starts -->
        <header class="header_section">
          <!-- navbar starts -->
          <nav class="navbar navbar-expand-lg header_navbar">
            <a class="navbar-brand" href="index.html">
              <img src="images/logo.png" alt="" />
              <span> 轻态公寓·老年港湾 </span>
            </a>
            <button
              class="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class=""> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto align-items-center">
                <li class="nav-item active">
                  <a class="nav-link" href="index.html"
                    >首页 <span class="sr-only">(current)</span></a
                  >
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="about.html">关于轻态 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="property.html"> 找房 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="order_list.html"> 我的订单 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact.html"> 联系我们 </a>
                </li>
              </ul>
              <div class="user_option">
                <a href="user_info.html" class="user_login_link">
                  <svg
                    data-name="Layer 1"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 518.95 441.44"
                  >
                    <defs>
                      <style>
                        .cls-1 {
                          isolation: isolate;
                        }
                      </style>
                    </defs>
                    <title>user-icon</title>
                    <g class="">
                      <path
                        class=""
                        d="M631.75,452.8A132.22,132.22,0,0,1,659,495.72H140.05q9.84-24.53,30.1-45.27,21.27-21.69,52.41-37.73,89.78-47.16,181.63-45.51T585.83,417.9Q613.32,433,631.75,452.8ZM322.2,73.15q-34.77,17.92-55,49.75A127.59,127.59,0,0,0,247,192.7a126.32,126.32,0,0,0,20.76,70,146.22,146.22,0,0,0,55.53,50.46q35.28,18.87,77.06,18.63t77.07-19.57q34.75-18.86,54.49-50,20.75-32.55,20.75-70.27t-21.27-69.8q-20.25-31.12-54.49-49a163.52,163.52,0,0,0-77.33-18.87Q357.49,54.28,322.2,73.15Z"
                        transform="translate(-140.05 -54.28)"
                      />
                    </g>
                  </svg>
                </a>
              </div>
            </div>
          </nav>
          <!-- navbar ends -->
        </header>
        <!-- header section ends -->
      </div>
      <!-- hero area ends -->

      <!-- page info starts -->

      <div class="page_info layout_padding pl_mobile_20">
        <div class="section_bg section_bg_right"></div>
        <div class="container">
          <div class="page_box">
            <h2 class="page_name">公寓 详情</h2>
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">详情</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>

      <!-- page info ends -->

      <!-- blog detail section starts -->

      <section class="property_detail_section layout_padding" lang="zxx">
        <div class="container">
          <div class="row">
            <div class="col-lg-8">
              <div class="blog_detail_container blog_grid_section">
                <div class="box">
                  <div
                    id="customSlider2"
                    class="carousel slide"
                    data-ride="carousel"
                  >
                    <div class="carousel-inner">
                      <div
                        class="carousel-item"
                        :class="{'active':index === 0}"
                        v-for="(item,index) in detail.carousel"
                      >
                        <div class="img-box">
                          <img
                            :src="item.url"
                            class="img_w100"
                            alt="Blog image"
                          />
                        </div>
                      </div>
                    </div>
                    <ol class="carousel-indicators main_indicator">
                      <li
                        data-target="#customSlider2"
                        :data-slide-to="index"
                        :class="{'active':index === 0}"
                        v-for="(item,index) in detail.carousel"
                      ></li>
                    </ol>
                    <ol class="carousel-indicators second_indicator">
                      <li
                        data-target="#carouselExampleIndicators"
                        :data-slide-to="index"
                        v-for="(item,index) in detail.carousel"
                        :class="{'active indicator-li-1':index === 0}"
                      >
                        {{index+1}}
                      </li>
                    </ol>
                  </div>
                  <div class="detail-box">
                    <h5>{{detail.title}}</h5>
                    <div class="property_info">
                      <h6>
                        <svg
                          data-name="Layer 1"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 323.25 475.54"
                        >
                          <defs>
                            <style>
                              .cls-1 {
                                isolation: isolate;
                              }
                            </style>
                          </defs>
                          <title>location</title>
                          <g class="cls-1">
                            <path
                              class=""
                              d="M397.29,537.57q-17.4-22.82-29.89-41.29-54.88-77.16-89.12-148.35Q267.4,325.1,261.44,308.8a265.19,265.19,0,0,1-12-40.75Q233.72,188.18,287,128.4q50.53-57.6,129.87-54.34a147.84,147.84,0,0,1,66.84,18.2,164.16,164.16,0,0,1,53.25,45.92,155.85,155.85,0,0,1,28.8,63.57,166.86,166.86,0,0,1-4.89,85.32q-23.37,73.35-77.7,156.5Q467.37,468,433.7,515.29l-22.83,32.07a12.16,12.16,0,0,0-1.63,1.9c-.36.54-1.72-.27-4.07-2.45A62.64,62.64,0,0,1,397.29,537.57Zm89.66-300a77,77,0,0,0-9-38.31,81.36,81.36,0,0,0-26.62-29.89,72,72,0,0,0-37.23-12.77A84.73,84.73,0,0,0,372,165.07a75,75,0,0,0-30.7,27.45q-11.42,17.92-12.5,41.29a69.89,69.89,0,0,0,9,38.31A84.82,84.82,0,0,0,365.23,302a69.32,69.32,0,0,0,37.49,12.23,81.72,81.72,0,0,0,41.3-8.43,75.29,75.29,0,0,0,30.43-27.44Q485.87,260.45,487,237.62Z"
                              transform="translate(-245.88 -73.88)"
                            />
                          </g>
                        </svg>
                        <span> {{detail.address}} </span>
                      </h6>
                      <h6 class="blog_comment property_price">
                        <span> 租金：￥{{detail._price}} </span>
                      </h6>
                    </div>
                    <p>{{detail.content}}</p>
                  </div>
                </div>
                <div class="property_detail_info">
                  <div class="nav-tabs-navigation">
                    <div class="nav-tabs-wrapper">
                      <ul class="nav" data-tabs="tabs">
                        <li class="nav-item">
                          <a
                            class="nav-link active"
                            href="#ItemDetailsTab"
                            data-toggle="tab"
                            >细节</a
                          >
                        </li>
                        <li class="nav-item">
                          <a
                            class="nav-link"
                            href="#itemFeaturesTab"
                            data-toggle="tab"
                            >设施服务</a
                          >
                        </li>
                        <li class="nav-item">
                          <a
                            class="nav-link"
                            href="#itemFloorTab"
                            data-toggle="tab"
                            >样板图</a
                          >
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="tab-content">
                    <div class="tab-pane active" id="ItemDetailsTab">
                      <div class="property_item_details">
                        <h5>
                          面积: <span> {{detail.propertySize}} 平方米 </span>
                        </h5>
                        <h5>卧室: <span> {{detail.bedrooms}} </span></h5>
                        <h5>建造于: <span> {{detail.yearBuilt}}</span></h5>
                        <h5>卫生间: <span> {{detail.bathrooms}} </span></h5>
                        <h5>门牌号: <span> {{detail.propertyId}}</span></h5>
                      </div>
                    </div>
                    <div class="tab-pane" id="itemFeaturesTab">
                      <div class="property_item_features property_item_details">
                        <h5 v-for="(item,index) in detail.features">
                          <svg
                            height="512pt"
                            viewBox="0 0 512 512"
                            width="512pt"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m512 58.667969c0-32.363281-26.304688-58.667969-58.667969-58.667969h-394.664062c-32.363281 0-58.667969 26.304688-58.667969 58.667969v394.664062c0 32.363281 26.304688 58.667969 58.667969 58.667969h394.664062c32.363281 0 58.667969-26.304688 58.667969-58.667969zm0 0"
                              fill="#4caf50"
                            />
                            <path
                              d="m385.75 171.585938c8.339844 8.339843 8.339844 21.820312 0 30.164062l-138.667969 138.664062c-4.160156 4.160157-9.621093 6.253907-15.082031 6.253907s-10.921875-2.09375-15.082031-6.253907l-69.332031-69.332031c-8.34375-8.339843-8.34375-21.824219 0-30.164062 8.339843-8.34375 21.820312-8.34375 30.164062 0l54.25 54.25 123.585938-123.582031c8.339843-8.34375 21.820312-8.34375 30.164062 0zm0 0"
                              fill="#fafafa"
                            />
                          </svg>
                          <span> {{item}} </span>
                        </h5>
                      </div>
                    </div>
                    <div class="tab-pane" id="itemFloorTab">
                      <div class="property_item_floor">
                        <div class="img-box">
                          <img :src="detail.styleImg" alt="" />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="property_detail_info">
                    <div class="nav-tabs-navigation">
                      <div class="nav-tabs-wrapper">
                        <ul class="nav" data-tabs="tabs">
                          <li class="nav-item">
                            <a
                              class="nav-link active"
                              href="#ItemDetailsTab"
                              data-toggle="tab"
                              >加入轻态</a
                            >
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="tab-content">
                      <form class="needs-validation" novalidate>
                        <div class="form-group">
                          <label for="exampleInputEmail1"
                            >租赁期限（一年起租）：</label
                          >
                          <el-input
                            v-model="form.term"
                            type="number"
                            @input="form.term = form.term.replace(/[^0-9]/g, '')"
                            placeholder="请输入租赁期限"
                          ></el-input>
                        </div>
                        <div class="form-group">
                          <label for="exampleInputPassword1">租赁总额：</label>
                          <div>￥{{(totalPrice/100).toFixed(2)}}</div>
                        </div>
                        <button
                          type="button"
                          @click="onSubmit"
                          class="btn btn-primary"
                        >
                          提交
                        </button>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <el-dialog title="请支付" :visible.sync="dialogVisible" width="30%">
        <div>
          <div class="text-center">
            需支付：￥{{(totalPrice/100).toFixed(2)}}
          </div>
          <div class="flex flex-row justify-content-center">
            <img class="" src="images/wx_pay.png" alt="#" />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onPay">我已支付</el-button>
        </span>
      </el-dialog>

      <!-- blog detail section ends -->

      <!-- footer section -->
      <footer class="footer_section">
        <p>轻态公寓 | 轻态港湾 | 轻态社区</p>
        <p>Copyright © 2024 轻态 ICP证浙B2-20160559</p>
      </footer>
      <!-- end  footer section -->
    </div>

    <!-- js section -->
    <!-- jQuery -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <!-- bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!-- owl slider -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- nice select -->
    <script src="js/jquery.nice-select.min.js"></script>
    <!-- custom js -->
    <script src="js/custom.js"></script>
    <script src="js/vue@2.6.14.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          detail: {},
          form: {
            houseId: "",
            term: 1,
            totalPrice: "",
          },
          preOrderId: null,
          dialogVisible: false,
        },
        computed: {
          totalPrice({ detail, form }) {
            return Number(detail.price || 0) * Number(form.term || 0);
          },
        },
        mounted() {},
        created() {
          this.getDetail();
        },
        methods: {
          getUrlParam(name) {
            const searchParams = new URLSearchParams(window.location.search);

            // 获取所有参数为对象形式
            const allParams = Object.fromEntries(searchParams.entries());

            return allParams;
          },
          getDetail() {
            const params = this.getUrlParam();
            console.log("=======", params);
            if (!params.id) return;
            axios
              .get(
                `http://localhost:8080/api/houses/app/getDetail?id=${params.id}`
              )
              .then((response) => {
                const res = response.data;
                if (res.code == 200) {
                  res.data._price = (res.data.price / 100).toFixed(2);
                  this.detail = Object.assign({}, res.data);
                } else if (response.data.code === 401) {
                  this.$confirm("你登录已过期，是否前去登录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  }).then(() => {
                    window.location.href = "./login.html";
                  });
                }
              });
          },
          onToPropertyDetail(item) {
            window.location.href = `./property_detail.html?id=${item.id}`;
          },
          onSubmit() {
            const token = window.localStorage.getItem("APFTE_TOKEN");
            if (!token) {
              this.$confirm("你暂未登录，是否前去登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                window.location.href = "./login.html";
              });
              return;
            }
            const { term } = this.form;
            if (!term) {
              return this.$message.warning("请填写完整信息");
            }
            const params = {
              houseId: this.detail.id,
              term,
              totalPrice: this.totalPrice,
            };
            axios({
              headers: {
                Authorization: "Bearer " + token,
              },
              method: "post",
              data: params,
              url: "http://localhost:8080/api/order/app/pre_order",
            }).then((response) => {
              if (response.data.code === 200) {
                this.preOrderId = response.data.data;
                this.$message.success("提交成功，请支付金额");
                this.dialogVisible = true;
              } else if (response.data.code === 401) {
                this.$confirm("你登录已过期，是否前去登录?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then(() => {
                  window.location.href = "./login.html";
                });
              } else {
                this.$message.error(response.data.msg);
              }
            });
          },
          onPay() {
            const token = window.localStorage.getItem("APFTE_TOKEN");
            if (!token) {
              this.$confirm("你暂未登录，是否前去登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                window.location.href = "./login.html";
              });
              return;
            }

            const params = {
              id: this.preOrderId,
            };
            axios({
              headers: {
                Authorization: "Bearer " + token,
              },
              method: "post",
              data: params,
              url: "http://localhost:8080/api/order/app/pay_order",
            }).then((response) => {
              if (response.data.code === 200) {
                this.$message.success("提交成功，请等待轻态审核");
                this.dialogVisible = false;
              } else if (response.data.code === 401) {
                this.$confirm("你登录已过期，是否前去登录?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then(() => {
                  window.location.href = "./login.html";
                });
              } else {
                this.$message.error(response.data.msg);
              }
            });
          },
        },
      });
    </script>
  </body>
</html>
